<template>
  <div class="app-container" v-loading="pageLoading">
    <div class="filter-container">
      <el-select style="width: 200px" v-model="query.cust_id" filterable remote :remote-method="getcustomerOptions"
        class="filter-item" placeholder="请选择客户" clearable>
        <el-option v-for="i in customerOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select v-model="query.group_id" class="filter-item" placeholder="请选择工序" filterable clearable>
        <el-option v-for="i in groupOptions" :key="i.id" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-input style="width: 200px" placeholder="输入物料查询" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.key_part_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" v-permission="'maLabel.export'"
        :loading="exportLoading">导出</el-button>
      <el-button type="primary" class="filter-item" @click="createItem">创建打印设定</el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <el-dialog :title="data.id ? '编辑' : '创建'" :width="formProps.dialogWidth" :close-on-click-modal="false"
      :visible.sync="editFormVisible">
      <div style="padding-right: 100px">
        <!-- <z-form :data="data" :fields="fields" :formProps="formProps"></z-form> -->
        <el-form :model="data" v-bind="formProps">
          <el-row>
            <el-col v-show="row.is_common==0" :span="12">
              <el-form-item label="物料">
                <el-select v-model="data.sku_id" clearable filterable remote :remote-method="getMatOptions"
                  placeholder="输入搜索条件查询" style="width: 100%">
                  <el-option v-for="o in skuOptions" :key="o.value" :label="o.label" :value="o.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="row.is_common==0" :span="12">
              <el-form-item label="客户">
                <el-select v-model="data.cust_id" clearable filterable remote :remote-method="getcustomerOptions"
                  style="width: 100%">
                  <el-option v-for="o in customerOptions" :key="o.value" :label="o.label" :value="o.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col v-show="row.is_common==0" :span="8">
              <el-form-item>
                <span slot="label">
                  <el-tooltip content="如果不选，则不限制可使用的工序" placement="top">
                    <div class="inline-block text-blue pointer">工序</div>
                  </el-tooltip>
                </span>
                <el-select v-model="data.group_id" clearable filterable style="width: 100%">
                  <el-option v-for="o in groupOptions" :key="o.value" :label="o.label" :value="o.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="打印数量">
                <span slot="label">
                  <span class="text-red">*</span>
                  <span>打印数量</span>
                </span>
                <el-input-number v-model="data.label_qty" :min="1" :max="99" :step="1" clearable style="width: 100%">
                </el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input v-model="data.remarks" type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="text-right">
          <el-button @click="editFormVisible = false">取消</el-button>
          <el-button v-if="!formProps.disabled" type="primary" @click.native="submit" :loading="submitLoading">
            确认
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
import _ from 'lodash'
export default {
  props: {
    laberDesignId: {
      typeof: String,
      default: '',
    },
  },
  mixins: [commonMixin],
  name: 'maLabel',
  data: function () {
    return {
      api: this.$api.labelconfig,
      apiCreate: this.$api.labelconfig + 'modify',
      apiEdit: this.$api.labelconfig + 'modify',
      name: '物料标签档案',
      row: { is_common: 0 },
      columns: [
        { title: '料号', key: 'key_part_no', width: 160 },
        { title: '物料名称', key: 'key_part_name' },
        { title: '客户编码', key: 'cust_code', width: 120 },
        { title: '客户名称', key: 'cust_name', width: 140 },
        { title: '工序名称', key: 'group_name', width: 140 },
        { title: '打印数量', key: 'label_qty', width: 80 },
        { title: '备注', key: 'remarks', width: 80 },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      fields: [],
      query: {
        cust_id: null,
        key_part_no: null,
      },
      tableProps: {
        border: true,
        opsColWith: 80,
        hideOperations: false,
      },
      formProps: {
        dialogWidth: '80%',
        labelWidth: '120px',
      },
      initData: {
        label_qty: 1,
      },
      skuOptions: [],
      customerOptions: [],
      groupOptions: [],
      viewOptions: [],
      levelOptions: [
        { label: 'SN标签', value: 1 },
        { label: '出货标签', value: 2 },
        { label: '盒标签', value: 3 },
        { label: '内箱标签', value: 4 },
        { label: '外箱标签', value: 5 },
        { label: '栈板标签', value: 6 },
      ],
      labelList: [],
      labelOptions: [],
      labelId: this.laberDesignId,
    }
  },
  watch: {
    laberDesignId: {
      handler(v, o) {
        if (!!v && v !== o) {
          this.getInfo()
          this.research()
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 客户远程搜索
    async getcustomerOptions(val) {
      this.$request(this.$api.custom + 'getlist', { page: 1, size: 100, queryString: val ? val : '' }).then((r) => {
        this.customerOptions = r.list.map((i) => ({
          label: `${i.cust_code} ${i.cust_name}`,
          value: i.id,
        }))
      })
    },
    createItem() {
      this.data = _.cloneDeep(this.initData)
      if (!this.laberDesignId) {
        this.$message({
          message: '维护模板规则，必须先点击选中模板记录',
          type: 'error',
        })
        return
      }
      this.editFormVisible = true
    },
    getInfo() {
      this.pageLoading = true
      let url = this.$api.label + 'getbyid'
      this.$request(url, {
        id: this.laberDesignId,
      })
        .then((r) => {
          this.row = r
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    getMatOptions(query) {
      this.skuOptions = []
      if (query) {
        this.$request(this.$api.mat + 'getmatandsku', { queryString: query })
          .then((r) => {
            this.skuOptions = this.arrayOptions(r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      }
    },
    singleMatOptions(id) {
      if (id) {
        this.$request(this.$api.mat + 'getmatandsku', { id: id })
          .then((r) => {
            this.skuOptions = this.arrayOptions(r, 'id', ['key_part_no', 'key_part_name'])
          })
          .catch(() => {})
      } else {
        this.skuOptions = []
      }
    },
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      return tmp.map((i) => {
        let level = this.levelOptions.find((j) => j.value == i.label_level)
        i.label_level = level ? level.label : ''
        return i
      })
    },
    getList() {
      this.query.label_id = this.laberDesignId
      this.pageLoading = true
      let url = this.api + 'getlist'
      this.$request(url, this.formatQuery(this.query))
        .then((r) => {
          this.list = this.formatList(r.list)
          this.total = r.total
        })
        .finally(() => {
          this.pageLoading = false
        })
    },
    addDetail(i) {
      i = i || 0
      this.data.detail_list.splice(i + 1, 0, {})
    },
    removeDetail(i) {
      this.data.detail_list.splice(i, 1)
    },
    submit() {
      let url = this.apiCreate
      let data = this.formatBeforeSave(this.data)
      data['label_id'] = this.laberDesignId
      this.submitLoading = true
      this.$request(url, data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    fieldOptions(v) {
      let t = this.viewOptions.find((i) => i.value == v.name)
      return t ? t.children : []
    },
  },
  created: function () {
    this.$request(this.$api.custom + 'getlist', { page: 1, size: 99 }).then((r) => {
      this.customerOptions = this.arrayOptions(r.list, 'id', ['cust_code', 'cust_name'])
    })
    this.$request(this.$api.group + 'getlistbypage', { page: 1, size: 999 }).then((r) => {
      this.groupOptions = this.arrayOptions(r.list, 'id', ['group_name'])
    })
    this.$request(this.$api.factor + 'getlist', { page: 1, size: 10, coding_type: 'view' }).then((r) => {
      this.$request(this.$api.param + 'getlist', { page: 1, size: 10, paramType: 'LABEL_VIEW_FIELDS' }).then((r2) => {
        this.viewOptions = r.list.map((i) => ({
          label: `${i.coding_param} ${i.coding_desc}`,
          value: i.coding_param,
          children: r2.list.filter((j) => j.param_name == i.coding_param),
        }))
      })
    })
  },
}
</script>
<style scoped>
</style>
